.game {
  position: absolute;
  top: 50px;
  bottom: 30px;
  width: 100%;
  height: calc(100% - 80px);
  background: #212529;
  justify-content: center;
  vertical-align: middle;
  color: #fff;
  overflow-x: hidden;

  .game-content {

    .content-top {
      height: 30px;
      line-height: 30px;
      font-family: 13px;
      background-color: #0310EF;
      padding: 0 10px;

      .stage {
        text-align: center
      }

      .area {
        float: right;
      }
    }

    .content-center {
      position: relative;
      height: calc(100% - 200px);

      .match-info {
        width: 100%;
        display: flex;

        .info-sides {
          height: 100px;
          display: flex;
          width: 45%;

          .abstain {
            height: 100%;
            width: 15%;
            text-align: center;
            line-height: 100px;
            background-color: #BD221D;
            font-size: 20px;
            cursor: pointer;
          }

          .user-name {
            background-color: #BD221D;
            width: 85%;
            text-align: center;
            height: 100%;
            vertical-align: middle;

            line-height: 50px;
            font-size: 24px;
          }
        }

        .info-center {
          width: 10%;

          .order {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: 20px;
            font-weight: 600;
            padding: 3px 3px 0 3px;
          }

          .text {
            font-size: 42px;
            color: #ffff66;
            font-weight: 700;
            text-align: center;
          }

          .time {
            text-align: center;
            font-size: 25px;
          }
        }

        .info-left {
          .user-name {
            margin-left: 10px;

          }
        }

        .info-right {
          .abstain {
            background-color: #009F33;
          }

          .user-name {
            margin-right: 10px;
            background-color: #009F33;
          }
        }
      }

      .real-score {
        position: fixed;
        bottom: 200px;
        width: 100%;
        top: 180px;
        margin: 5px 0;
        display: flex;

        .score-sides {
          width: 45%;
          height: 100%;

          ::v-deep .dq-jia {
            font-size: 24px;
            font-weight: 800;
            cursor: pointer;
          }

          ::v-deep .dq-jian {
            font-size: 24px;
            font-weight: 800;
            cursor: pointer;
          }

          .operation {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;

            .red {
              height: 100px;
              width: 50px;
              background-color: #BD221D;
              text-align: center;
              line-height: 50px;
              margin: 0 10px;
            }

            .yellow {
              height: 100px;
              background-color: #93B94C;
              text-align: center;
              line-height: 50px;
              width: 50px;
            }

            .score-opera {
              margin: 0 10px;

              .add {
                height: 46px;
                width: 50px;
                background-color: #0310EF;
                text-align: center;
                line-height: 50px;
                margin-bottom: 8px;
              }

              .reduce {
                height: 46px;
                width: 50px;
                background-color: #0310EF;
                text-align: center;
                line-height: 50px;
              }
            }

            .score-text {
              width: calc(100% - 172px);
              background-color: #0310EF;
              font-size: 150px;
              display: flex;
              align-items: center;
              justify-content: center;
              height: 100%;
              color: #ffff66;
            }
          }
        }

        .stop {
          width: calc(10% - 10px);
          text-align: center;
          margin: 0 5px;


          .stop-top {
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0310EF;

            ::v-deep .dq-jiaohuan {
              font-size: 100px;
              height: 50%;
              cursor: pointer;
            }
          }

          .stop-bottom {
            height: calc(50% - 5px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            background-color: #009F33;
            margin-top: 5px;
            cursor: pointer;
          }
        }
      }

      .round-score {
        height: 200px;
        position: fixed;
        bottom: 0 !important;
        width: 100%;
        display: flex;

        .score-all {
          width: 75%;
          display: flex;

          .box-score {
            height: 60px;
            width: 100%;

            .box-items {
              display: flex;
              justify-content: center;
              vertical-align: middle;

              .box-top {
                margin-top: 20px;
                text-align: center;
                width: 100%;
                background-color: rgba(3, 16, 239, 0.8);
                line-height: 35px;
                height: 50%;
                margin-right: 3px;
                font-size: 20px;
              }

              .box-bottom {
                margin-top: 3px;
                text-align: center;
                width: 100%;
                background-color: rgba(3, 16, 239, 0.5);
                line-height: 35px;
                height: 50%;
                margin-right: 3px;
                font-size: 20px;
              }
            }
          }
        }

        .show-score {
          width: 25%;
          display: flex;
          justify-content: center;
          vertical-align: middle;
          margin-top: 10px;

          .game-list {
            background-color: #93B94C;
            height: 72%;
            width: 40%;
            text-align: center;
            border-radius: 20px;
            margin-right: 10px;

            ::v-deep .dq-liebiao1 {
              font-size: 100px;
              cursor: pointer;
            }


          }

          .game-score {
            background-color: #93B94C;
            height: 72%;
            width: 40%;
            text-align: center;
            border-radius: 20px;
            margin-right: 10px;

            ::v-deep .dq-chengji {
              font-size: 100px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .group-list {
    display: flex;
    justify-content: center;
    vertical-align: middle;
    width: 100%;
    height: 40px;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    margin-bottom: 10px;

    .game-order {
      width: 80px;
      background-image: linear-gradient(135deg, #65FDF0 10%, #1D6FA3 100%);
    }

    .match-info {
      width: calc(100% - 160px);
      background-image: linear-gradient(135deg, #65FDF0 10%, #1D6FA3 100%);
      margin: 0 5px;
      display: flex;
      justify-content: center;
      vertical-align: middle;
      font-size: 20px;

      .info-left {
        display: flex;

        .name {
          color: #130CB7;
        }

        .area {
          color: #002661;
          margin-right: 15px;
        }
      }

      .info-center {
        color: #ffff66;
        margin: 0 30px;
        font-size: 32px;

      }

      .info-right {
        display: flex;

        .name {
          color: #130CB7;
        }

        .area {
          color: #002661;
          margin-left: 15px;
        }
      }
    }

    .goto-game {
      width: 80px;
      background-image: linear-gradient(135deg, #65FDF0 10%, #1D6FA3 100%);

      ::v-deep .dq-jinru {
        font-size: 32px;
        cursor: pointer;
      }
    }
  }

  ::v-deep .el-dialog__body {
    padding: 10px 2px 0 2px;
    background: rgba(23, 26, 29, 0.6);
    overflow-y: auto;
    max-height: 450px;
    border-radius: 0;
  }

  ::v-deep .el-dialog__header {
    border: none;
    background-image: linear-gradient(135deg, #65FDF0 10%, #1D6FA3 100%);
  }

  .table-top {
    color: #fff;
    background-color: #93B94C;
    display: flex;
    justify-content: center;
    vertical-align: middle;
    height: 35px;
    line-height: 35px;
    font-size: 22px;

    .column1 {
      width: 10%;
      height: 35px;
      line-height: 35px;
      text-align: center;
    }

    .column2 {
      width: 30%;
    }

    .column3 {
      width: 10%;
      text-align: center;
      margin-right: 9px;
    }
  }

  .table-content {
    .content {
      height: 45px;
      line-height: 45px;
      display: flex;
      margin-top: 3px;

      .column1 {
        width: 10%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        display: flex;
        justify-content: center;
        vertical-align: middle;
        padding: 5px 0 0 0;

        .table-order {
          background-image: linear-gradient(135deg, #FF9D6C 10%, #BB4E75 100%);
          width: 60%;
          color: #fff;
          font-size: 20px;
        }
      }

      .column2 {
        width: 30%;
        height: 35px;
        line-height: 35px;
        margin-top: 5px;
        padding-left: 5px;
        background-color: #0310EF;
        color: #fff;
      }

      .column3 {
        width: 10%;
        text-align: center;
        background-color: #0310EF;
        //background-image: linear-gradient(135deg, #6B73FF 10%, #000DFF 100%);
        margin-top: 5px;
        height: 35px;
        padding-left: 5px;
        line-height: 35px;
        margin: 5px 3px 0 3px;
        color: #fff;
      }

      .column3-empty {
        width: 10%;
        text-align: center;
        background-color: #465EFB !important;
        margin-top: 5px;
        height: 35px;
        padding-left: 5px;
        line-height: 35px;
        margin: 5px 3px 0 3px;
        color: #fff;
      }
    }
  }
}